<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传 - 图片上传</title>
</head>
<body>
	<h1>文件上传 - 图片上传 - 修改头像</h1>

	<form action="${pageContext.request.contextPath }/admin/upload3.do"
		method="post" enctype="multipart/form-data">

		<img
			src="${pageContext.request.contextPath }/file/head/${sessionScope.user.image }"
			style="width: 300px" onclick="selectPicture()" id="pic"/>

		<button type="button" onclick="selectPicture()">浏览图片</button>

		<input type="file" name="head" style="display: none" id="head"
			onchange="changeImg()" /><br /> 
			
		<input type="submit" value="确定修改" />
	</form>


	<script type="text/javascript">
		// 选择图片
		function selectPicture() {
			// 通过代码实现文件域的单击操作
			document.getElementById("head").click();
		}

		// 每次选择改变图片后，实现在页面中回显选择的图片
		function changeImg() {
			
			// 获取文件域节点
			var inputFile = document.getElementById("head");

			// 获取文件域选择的文件
			var file = inputFile.files.item(0);

			// 判断选择的文件必须是图像
			if (file != null) {
				// 获取文件类型
				var fileType = file.type;
				
				console.info(fileType) ;

				// 定义正则表达式
				var reg = /^image\/.*$/i;

				// 判断是否选择图片
				if (!reg.test(fileType)) {
					// 如果不是图片，则返回，不往下执行了
					return;
				}

				// 如果选择的是图片，则使用 FileReader 对象回显图片
				// 实例化FileReader对象
				var freader = new FileReader();

				// 读取文件内容
				freader.readAsDataURL(file);

				// 当读取操作成功完成时回显图片
				freader.onload = function(e) {
					// base64编码
					// console.info(e) ;
					document.getElementById("pic").src = e.target.result;
				}
			}
		}
	</script>
</body>
</html>